<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="10" y="10" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="translate(20)"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#0f0" stroke-dasharray="2.5"
            transform="translate(0,20)"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5"
            transform="translate(10,10)"/>
    </svg>
    <hr>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="10" y="10" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="rotate(45)"/>
    </svg>
    <svg widht="400" height="400" viewBox="-100 -100 200 200">
        <rect x="0" y="0" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="0" y="0" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="rotate(45)"/>
    </svg>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="10" y="10" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="rotate(45,40,30)"/>
        <circle cx="40" cy="30" r="1" style="fill:red;"/>    
    </svg>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="10" y="10" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="rotate(45)" transform-origin="40 30"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5"
            transform="rotate(45,70,50)"/>
        <circle cx="40" cy="30" r="1" style="fill:red;"/>    
        <circle cx="70" cy="50" r="1" style="fill:blue;"/>    
    </svg>
    <hr>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="10" y="10" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="scale(0.4)" transform-origin="40 30" />
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#0f0" stroke-dasharray="2.5"
            transform="scale(1,0.5)" transform-origin="40 30" />
        <rect x="10" y="10" width="60" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5"
            transform="scale(0.5,1)" transform-origin="40 30" />
    </svg>
    <hr>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="0" y="0" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="0" y="0" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="skewX(30)"/>
    </svg>
    <svg widht="400" height="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="60" height="40" fill="#fcc" fill-opacity="0.8"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#f00" stroke-dasharray="2.5"
            transform="skewX(30)" transform-origin="50 40"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#0f0" stroke-dasharray="2.5"
            transform="skewX(30)" transform-origin="50 20"/>
        <rect x="20" y="20" width="60" height="40" fill="none" stroke="#00f" stroke-dasharray="2.5"
            transform="skewX(30)" transform-origin="50 60"/>

         <circle cx="50" cy="40" r="2" fill="#f00"/>   
         <circle cx="50" cy="20" r="2" fill="#0f0"/>   
         <circle cx="50" cy="60" r="2" fill="#00f"/>   
    </svg>
    <script src="index.js"></script>
</body>
</html>